let form = layui.form
let laypage = layui.laypage

let key = {
    page: 1,    //显示分页
    limit: 10, 	//每页数量
    advimgdesc: '',
    advimgsrc: '',
}

// 页面渲染函数
getList()
function getList() {
    $.ajax({
        method: 'GET',
        url: "/ydd_advimg/list",
        data: key,
        success: function ({ errno, errmsg, data: { count, data } }) {
            if (errno !== 0) return layer.msg('页面显示失败', { icon: 5, time: 1500 });

            $('tbody').html(data.map(({ advposname, id, advimgpos, advimgsrc, advimgdesc, advimglink }, index) => {
                return `<tr>
                    <td>${index + 1}</td>
                    <td>${advposname}</td>
                    <td>${advimgdesc}</td>
                    <td><img src="http://124.223.14.236:8060/${advimgsrc}" alt=""></td>
                    <td>${advimglink}</td>
                    <td>
                    <button type="button" class="layui-btn layui-btn-xs btn_edit iconfont xiugai" id="edit" data-id="${id}">编辑
                    </button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete delete shanchu" id="bianyuan2"  data-id='${id}'> 删除
                    </button>
                       
                    </td>
                  </tr>`}).join(''))

            renderPage(count)
            // <button type="button" class="layui-btn layui-btn-danger layui-btn-xs del-btn xiugai" id="bianyuan1" data-id="${id}"></button>
            //  <button type="button" class="layui-btn layui-btn-danger layui-btn-xs del-btn shanchu" id="bianyuan2" data-id="${id}"></button> 
        }
    });
}

// 下拉框渲染
getItem()
function getItem() {
    $.ajax({
        type: "GET",
        url: "/ydd_advpos/all",
        success: ({ errno, errmsg, data }) => {
            if (errno !== 0) return layer.msg('页面显示失败', { icon: 5, time: 1500 });
            // layer.msg('页面显示成功', { icon: 6, time: 1500 });

            const option = data.map(({ id, advposname }) => `
            <option value="${id}" data-id=${id}>${advposname}</option>`).join('')
            $('[name="advimgpos"]').append(option)
            form.render()   //更新全部表单数据
        }
    });
}

// 点击新增按钮出现弹出框
let layerIndex
$('.xinzeng').on('click', function () {
    layerIndex = layer.open({
        type: 1,
        title: '添加广告图',
        area: ['600px', '450px'],
        content: $('#editCateTpl').html()
    })
    getItem()
})

// 点击删除图标
$('body').on('click', '#bianyuan2', function () {
    const id = $(this).data('id')
    // console.log(id);
    $.ajax({
        type: "get",
        url: `/ydd_advimg/del`,
        data: { id },
        success: ({ errmsg, errno }) => {
            if (errno !== 0) return layer.msg(errmsg, { icon: 2, time: 1500 })
            layer.msg('删除成功！', { icon: 1, time: 1500 })
            // 重新刷新列表
            getList()
        }
    });
})

// 监听编辑图标提交表单事件(动态添加需要监听)
$('body').on('submit', '.xiugai', function (e) {
    e.preventDefault()
    $.ajax({
        type: "post",
        url: "/ydd_advimg/update",
        // data: JSON.stringify(data),
        // contentType: 'application/json',
        success: function ({ errmsg, errno, data }) {
            layer.close(layerIndex)
            if (errno) return layer.msg('修改失败', { icon: 2, time: 1500 })
            layer.msg('修改成功', { icon: 1, time: 1500 })
            getList()
        }
    });
})

// 模拟点击选择文件框
$('body').on('click', '#chooseImgBtn', function () {
    $('#file').click()
})

// 新增按钮 弹出框 上传文件
let file = null
$('body').on('change', '#file', function (e) {
    file = e.target.files
    // console.log(file[0]);
    const imgUrl = URL.createObjectURL(file[0])
    // console.log(imgUrl);
    $('#image').prop('src', imgUrl).show()
    // 显示隐藏的图片框
    $('.cover-left').show()
})

// 新增按钮 弹出框 提交数据
$('body').on('submit', '#form-edit', function (e) {
    e.preventDefault()
    const data = {}
    // console.log($(this).serialize());

    $(this).serialize().split('&').map(item => item.split('=')).forEach(([one, two]) => data[one] = decodeURI(two))
    // console.log(data);
    const pic = new FormData()
    pic.append('file', file[0])
    $.ajax({
        method: "post",
        url: "/upload?type=images",
        processData: false,
        data: pic,
        contentType: false,
        success: ({ errmsg, errno, data: { savePath } }) => {
            if (errno) return layer.msg(errmsg, { icon: 5, time: 1000 })
            data.advimgsrc = savePath
            $.ajax({
                method: 'post',
                url: "/ydd_advimg/add",
                // data: $(this).serialize(),
                data: JSON.stringify(data),
                contentType: 'application/json',
                success: function (res) {
                    layer.close(layerIndex)
                    // console.log(res);
                    getList()
                }
            });
        }
    });


})

// 点击close按钮 隐藏上方文本框
$('#close').on('click', function () {
    $('.search').hide()
    $('#close').hide()
    $('#open').show()
})

// 点击open按钮 显示上方文本框
$('#open').on('click', function () {
    $('.search').show()
    $('#open').hide()
    $('#close').show()
})

// 重置按钮 点击刷新
$('#SX').on('click', function () {
    self.location.reload()
})

// 小图标 点击刷新
$('#sx').on('click', function () {
    self.location.reload()
})

// 搜索然后渲染有的页面
$('#sousuo').on('submit', function (e) {
    e.preventDefault()
    // 广告图描述
    const tags = $('#tags').val()
    console.log(tags);
    // 广告图位置
    const advimgsrc = $('#qq').val()
    console.log(advimgsrc);

    key.advimgdesc = tags
    key.advimgsrc = advimgsrc
    getList()
})

// 4.分页器
function renderPage(count) {
    laypage.render({
        elem: 'page-box',
        count,
        limit: key.limit,
        limits: [5, 10, 20, 40, 50, 100],
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip', 'refresh',],  //自定义排版。count（总条目输区域）、limit（条目选项区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、skip（快捷跳页区域）、refresh（页面刷新区域）
        curr: key.page,
        jump: function (obj, first) {
            key.page = obj.curr
            key.limit = obj.limit
            //首次不执行
            if (!first) getList()
        }
    });
}

//  点击编辑图标 显示弹出层
let id
const content = ` 
<form class="layui-form" id="form-aa" lay-filter="formaa">
<label class="layui-form-label">广告图位置</label>
<div class="layui-form-item layui-inline">
  <select name="advimgpos">
    <option value="">请选择广告位</option>
  </select>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">广告图描述</label>
  <div class="layui-input-block">
    <input type="text" name="advimgdesc" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
      class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">广告图链接</label>
  <div class="layui-input-block">
    <input type="text" name="advimglink" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
      class="layui-input">
  </div>
</div>
<div class="layui-form-item">

  <label class="layui-form-label">广告图</label>
  <div class="cover-right">
    <input type="file" id="file">
    <div class="img-preview"></div>
    <button type="button" class="layui-btn layui-btn-danger" id="chooseImgBtn">选择封面</button>
  </div>
  <div class="cover-left">
    <img id="image" src="" alt="" />
  </div>
</div>
<button class="layui-btn juli" lay-submit>立即提交</button>
<button type="reset" class="layui-btn luli">取消</button>
</form>`
$('body').on('click', '.xiugai', function () {
    id = $(this).data("id")
    layerIndex = layer.open({
        time: 0,
        type: 1,
        title: '修改图片信息',
        area: ['600px', '450px'],
        content,
    })

    $.ajax({
        type: "GET",
        url: "/ydd_advimg/rowInfo",
        data: { id },
        success: ({ errmsg, errno, data }) => {
            const { advimgpos, advimgsrc, tags, create_date } = data
            if (errno) return layer.msg(errmsg, { icon: 5, time: 1000 })
            getItem()  //下拉框
            form.val('formaa', data)
            // console.log(data);
            form.render()
            // console.log(advimgpos)
            $('.layui-anim-upbit dd').each(function () {
                // console.log($(this).attr('lay-value'))
                // console.log($(this).attr('lay-value') === advimgpos)
                if ($(this).data('id') === +advimgpos) $(this).addClass('layui-this')
            })
            $('#image').prop('src', `http://124.223.14.236:8060/${advimgsrc}`).show()
        }
    })
})

// 编辑图标 弹出层 提交事件(动态渲染)
$('body').on('submit', '#form-aa', function (e) {
    e.preventDefault()
    const data = {}
    $(this).serialize().split('&').map(item => item.split('=')).forEach(([one, two]) => data[one] = decodeURI(two))
    // console.log(data);
    data.id = id
    // console.log(data)
    if (file) {
        const pic = new FormData()
        pic.append('file', file[0])
        $.ajax({
            method: "post",
            url: "/upload?type=images",
            processData: false,
            data: pic,
            contentType: false,
            success: ({ errmsg, errno, data: { savePath } }) => {
                if (errno) return layer.msg(errmsg, { icon: 2, time: 1500 })

                data.advimgsrc = savePath
                $.ajax({
                    method: 'POST',
                    url: '/ydd_advimg/update',
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    success: function ({ errmsg, errno }) {
                        layer.close(layerIndex)
                        if (errno) return layer.msg('修改失败', { icon: 5, time: 1000 })
                        layer.msg('修改成功', { icon: 1, time: 1000 }, () => {
                            getList()
                        })
                    }
                })
            }
        })
    } else {
        data.advimgsrc = $('#image').prop('src').substring(27)
        $.ajax({
            method: 'POST',
            url: '/ydd_advimg/update',
            data: JSON.stringify(data),
            contentType: 'application/json',
            success: function ({ errmsg, errno }) {
                layer.close(layerIndex)
                if (errno) return layer.msg('修改失败', { icon: 2, time: 1500 })
                layer.msg('修改成功', { icon: 1, time: 1500 }, function () {
                    getList()
                })
            }
        })
    }
})

// 编辑图标 弹出层 取消事件(动态渲染)
$('body').on('click', '.luli', function () {
    layer.close(layerIndex)
})

// 重置按钮
$('.reset').on('click', () => {
    const obj = {
        advimgdesc: '',
        advimgsrc: '',
        page: '1',
        limit: '10'
    }
    Object.assign(key, obj)  //将多个对象给目标对象
    getList() //重新渲染
})

// filter小图标切换
$('#filter').on('click', function () {
    $('.dl2').toggle()
})

// 拿到几个flt大标题
function getFilterList() {
    const data = []
    $('.flt').each(function () {
        const key = $(this).html()
        const value = $(this).data('id')
        data.push({
            key: key,
            value: value
        })
        // console.log(data);
    })
    return data
}

// 渲染filter小图标出现的框架
$('.dl2').html(getFilterList().map(({ key, value }) => `
	<dt data-id=${value}>
      <i class="layui-icon layui-icon-notice"></i>
      <label >
        <input type="checkbox" class="checkall" checked>
        <span class="active">${key}</span>
      </label>
  </dt>`).join(''))
